<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" >
<title>Raqba - Real Estate HTML Template | Property Detail</title>
<!-- Stylesheets -->
<link th:href="@{css/bootstrap.css}" rel="stylesheet">
<link th:href="@{css/style.css}" rel="stylesheet">
<link th:href="@{css/responsive.css}" rel="stylesheet">
<!--Color Switcher Mockup-->
<link th:href="@{css/color-switcher-design.css}" rel="stylesheet">

<!--Color Themes-->
<link id="theme-color-file" th:href="@{css/color-themes/default-theme.css}" rel="stylesheet">

<link rel="shortcut icon" th:href="@{images/favicon.png}" type="image/x-icon">
<link rel="icon" th:href="@{images/favicon.png}" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>

<body>

<div class="page-wrapper">
    <!-- Preloader -->
    <div class="preloader"></div>
    
    <!-- Main Header-->
    <header class="main-header header-style-one">
        <!--Header Top-->
        <div th:include="header :: headname"></div>
        <!--End Header Lower-->

        <!-- Sticky Header  -->
        <div class="sticky-header">
            <div class="auto-container clearfix">
                <!--Logo-->
                <div class="logo pull-left">
                    <a href="index.html" title=""><img src="images/icons/empty.png" data-src="images/logo-small.png" alt="" title=""></a>
                </div>
                <!--Right Col-->
                <div class="nav-outer pull-right">
                    <!--Mobile Navigation Toggler-->
                    <div class="mobile-nav-toggler"><span class="icon flaticon-menu"></span></div>
                    
                    <!-- Main Menu -->
                    <nav class="main-menu navbar-expand-lg">
                        <div class="navbar-collapse collapse clearfix">
                             <ul class="navigation clearfix"><!--Keep This Empty / Menu will come through Javascript--></ul>
                        </div>
                    </nav><!-- Main Menu End-->
                </div>
            </div>
        </div><!-- End Sticky Menu -->

        <!-- Mobile Menu  -->
        <div class="mobile-menu">
            <div class="menu-backdrop"></div>
            <div class="close-btn"><span class="icon flaticon-cancel-1"></span></div>
            
            <!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header-->
            <nav class="menu-box">
                <div class="nav-logo"><a href="index.html"><img src="images/icons/empty.png" data-src="images/logo.png" alt="" title=""></a></div>
                
                <ul class="navigation clearfix"><!--Keep This Empty / Menu will come through Javascript--></ul>
            </nav>
        </div><!-- End Mobile Menu -->
    </header>
    <!--End Main Header -->

    <!--Page Title-->
    <section class="page-title" style="background-image:url(images/background/4.jpg)">
        <div class="auto-container">
            <h1>属性详细信息</h1>
            <ul class="page-breadcrumb">
                <li><a href="index.html">主页</a></li>
                <li>属性详细信息</li>
            </ul>
        </div>
    </section>
    <!--End Page Title-->

    <!-- Sidebar Page Container -->
    <div class="sidebar-page-container">
        <div class="auto-container">
            <div class="property-info-box">
                <div class="row">
                    <div class="about-property col-lg-8 col-md-12 col-sm-12">
                        <h2 th:text="${galleydetail.getName()}"></h2>
                        <ul class="property-info clearfix">
                            <li><i class="fa fa-expand"></i> 356 Sq-Ft</li>
                            <li>Bedrooms  <i class="fa fa-bed" th:text="${galleydetail.getBedrooms()}"></i></li>
                            <li>Bathroom  <i class="fa fa-bath" th:text="${galleydetail.getBathrooms()}"></i></li>
                        </ul>
                    </div>
                    <div class="price-column col-lg-4 col-md-12 col-sm-12">
                        价格  <div class="price" th:text="${galleydetail.getPrice()}"></div>
                        地址  <div class="location"><i class="icon fa fa-map-marker-alt" th:text="${galleydetail.getAddress()}"></i></div>
                    </div>
                </div>
                <div class="image-box">
                    <figure class="image"><img src="images/icons/empty.png" data-src="images/resource/property-single-img.jpg" alt=""></figure>
                    <span class="status" th:text="${galleydetail.getStatus()}"></span>
                </div>
            </div>

            <div class="row clearfix">
                <!--Content Side-->
                <div class="content-side col-lg-8 col-md-12 col-sm-12">
                    <div class="property-detail">
                        <h3>房产介绍</h3>
                    <h6 th:text="${galleydetail.getDetail()}"></h6>
                        <br>
                        <h4>地址</h4>
                        <div class="table-outer">
                            <table class="info-table">
                                <tr>
                                    <th>地址:</th>
                                    <td th:text="${galleydetail.getAddress()}"></td>
                                    <th>城市:</th>
                                    <td th:text="${galleydetail.getCity()}"></td>
                                </tr>
                                <tr>
                                    <th>地址:</th>
                                    <td th:text="${galleydetail.getAddress()}"><strong></strong></td>
                                    <th>国家/地区是:</th>
                                    <td th:text="${galleydetail.getLocation()}"><strong></strong></td>
                                </tr>
                                <tr>
                                    <th>邮编:</th>
                                    <td> 10009</td>
                                    <th>国家:</th>
                                    <td th:text="${galleydetail.getLocation()}"></td>
                                </tr>
                            </table>
                            
                        </div>

                        <h4>细节</h4>
                        <div class="table-outer">
                            <table class="info-table">
                                <tr>
                                    <th>房产编号:</th>
                                    <td th:text="${galleydetail.getId()}"></td>
                                    <th>价格:</th>
                                    <td th:text="${galleydetail.getPrice()}"></td>
                                </tr>
                                <tr>
                                    <th>房间数:</th>
                                    <td th:text="${galleydetail.getBathrooms()+galleydetail.getBedrooms()}"><strong>Rooms:</strong></td>
                                    <th>Property Lot Size:</th>
                                    <td th:text="${galleydetail.getSize()}"><strong>Property Lot Size:</strong></td>
                                </tr>
                                <tr>
                                    <th>房产面积:</th>
                                    <td th:text="${galleydetail.getSize()}"></td>
                                    <th>Test:</th>
                                    <td>02</td>
                                </tr>
                                <tr>
                                    <th>洗漱室:</th>
                                    <td th:text="${galleydetail.getBathrooms()}"></td>
                                    <th>Structure Type:</th>
                                    <td>Brick</td>
                                </tr>
                                <tr>
                                    <th>卧室</th>
                                    <td th:text="${galleydetail.getBathrooms()+galleydetail.getBedrooms()}"></td>
                                    <th>Rooms:</th>
                                    <td th:text="${galleydetail.getBedrooms()+galleydetail.getBathrooms()}"></td>
                                </tr>
                            </table>
                        </div>

                        <h4>特点</h4>
                        <ul class="features-list clearfix">
                            <li>阁楼</li>
                            <li>暖气</li>
                            <li>海景</li>
                            <li>酒窖</li>
                            <li>篮球场</li>
                            <li>健身房</li>
                            <li>场地</li>
                            <li>晒阳光的地方</li>
                            <li>湖景</li>
                            <li>粪池</li>
                            <li>后院</li>
                            <li>前院</li>
                            <li>有栅栏的院子</li>
                            <li>洒水装置</li>
                            <li>洗衣机和干衣机</li>
                            <li>甲板</li>
                            <li>洗衣房</li>
                            <li>私人空间</li>
                            <li>屋顶</li>
                        </ul>
                        <h4>地板计划</h4>
                        <div class="floor-plans">
                            <ul class="floor-info clearfix">
                                <li class="title">样品平面图</li>
                                <li th:text="'浴室  '+${galleydetail.getBathrooms()}"></li>
                                <li th:text="'卧室  '+${galleydetail.getBedrooms()}"></li>
                                <li>12,000 Sq Ft</li>
                            </ul>
                            <div class="text">
                                <h5 th:text="${galleydetail.getDetail2()}"></h5>
                            </div>
                            <div class="floor-image">
                                <figure class="image"><img src="images/icons/empty.png" th:data-src="${galleydetail.getImg2()}" alt=""></figure>
                            </div>
                        </div>

                        <h4>虚拟旅行</h4>
                        <div class="video-box">
                            <figure class="image"><img src="images/icons/empty.png" data-src="images/resource/image-4.jpg" alt=""></figure>
                            <div class="content-box">
                                <a href="https://www.youtube.com/watch?v=Fvae8nxzVz4" class="play-now" data-fancybox="gallery" data-caption=""><i class="icon flaticon-play-button" aria-hidden="true"></i><span class="ripple"></span></a>
                                <h4>PIEDMONT HEIGHTS俱乐部</h4>
                            </div>
                        </div>

                        <h4>带地图的位置</h4>
                        <div class="map-outer">
                            <!--Map Canvas-->
                            <div class="map-canvas"
                                data-zoom="12"
                                data-lat="-37.817085"
                                data-lng="144.955631"
                                data-type="roadmap"
                                data-hue="#ffc400"
                                data-title="Envato"
                                data-icon-path="images/icons/map-marker-2.png"
                                data-content="Melbourne VIC 3000, Australia<br><a href='mailto:info@youremail.com'>info@youremail.com</a>">
                            </div>
                        </div>

                        <!-- Review Box -->
                        <div class="review-area" th:each="Comments:${galleydetail.getComments()}">
                            <!--Reviews Container-->
                            <div class="reviews-container">
                                <h3>客户评论</h3>
                                <!--Reviews-->
                                <article class="review-box">
                                    <div class="thumb-box">
                                        <figure class="thumb"><img src="images/icons/empty.png" data-src="images/resource/review-thumb-1.jpg" alt=""></figure>
                                        <a href="#" class="reply-btn">回复</a>
                                    </div>
                                    <div class="content-box">
                                        <div class="name" th:text="${Comments.getUsername()}"></div>
                                        <span class="date"><i class="fa fa-calendar-alt" th:text="${Comments.getDate()}"></i></span>
                                        <div class="rating"><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></div>
                                        <div class="text" th:text="${Comments.getSay()}"></div>
                                    </div>
                                </article>
                                



                            </div>
                        </div>

                         <!-- Review Comment Form -->
                        <div class="review-comment-form"> 
                            <h3>留下评论</h3>
                            <form method="post" th:action="@{/addcomment}">
                                <div class="row">
                                    <div class="form-group col-lg-6 col-md-12 col-sm-12">
                                        <input type="text" name="username" placeholder="Full Name" required>
                                    </div>
                                    <div class="form-group col-lg-6 col-md-12 col-sm-12">
                                        <input type="text" name="number" placeholder="Email Address" required>
                                    </div>
                                    <div class="form-group col-lg-12 col-md-12 col-sm-12">
                                        <textarea name="message" placeholder="Massage"></textarea>
                                    </div>
                                    <div class="form-group col-lg-6 col-md-6 col-sm-6">
                                        <div class="rating-box">
                                            <div class="text"> Your Rating:</div>
                                            <div class="rating"><a href="#"><span class="far fa-star"></span></a><a href="#"><span class="far fa-star"></span></a><a href="#"><span class="far fa-star"></span></a><a href="#"><span class="far fa-star"></span></a><a href="#"><span class="far fa-star"></span></a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group col-lg-6 col-md-6 col-sm-6 text-right">
                                        <button class="theme-btn btn-style-one" type="submit" name="submit-form"><span class="btn-title">提交</span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!--Sidebar Side-->
                <div class="sidebar-side col-lg-4 col-md-12 col-sm-12">
                    <aside class="sidebar default-sidebar">

                        <!--search box-->


                        <!-- Categories -->
                        <div class="sidebar-widget search-properties">
                            <div class="sidebar-title"><h2>搜索房产</h2></div>
                            <!-- Property Search Form -->
                            <div class="property-search-form style-four">
                                <form method="post" th:action="@{/searchlist}">
                                    <div class="row no-gutters">
                                        <!-- Form Group -->
                                        <div class="form-group">
                                            <select class="custom-select-box" name="address">
                                                <option value="all">城市</option>
                                                <option value="东莞">东莞</option>
                                                <option value="枣庄">枣庄</option>
                                                <option value="青岛">青岛</option>
                                                <option value="北京">北京</option>
                                            </select>
                                        </div>

                                        <!-- Form Group -->
                                        <div class="form-group">
                                            <select class="custom-select-box" name="type">
                                                <option value="all">房屋类型</option>
                                                <option value="residential">居民房</option>
                                                <option value="villa">别墅</option>
                                                <option value="industry">工业房</option>
                                                <option value="hotle">公寓</option>
                                            </select>
                                        </div>

                                        <!-- Form Group -->
                                        <div class="form-group">
                                            <select class="custom-select-box" name="status">
                                                <option value="all">销售状态</option>
                                                <option value="rent">租借</option>
                                                <option value="sale">销售</option>
                                            </select>
                                        </div>


                                        <!-- Form Group -->
                                        <div class="form-group">
                                            <select class="custom-select-box" name="bedrooms">
                                                <option value="all">卧室房间数</option>
                                                <option value="1">01 Bedroom</option>
                                                <option value="2">02 Bedrooms</option>
                                                <option value="3">03 Bedrooms</option>
                                                <option value="4">04 Bedrooms</option>
                                                <option value="5">05 Bedrooms</option>
                                            </select>
                                        </div>

                                        <!-- Form Group -->
                                        <div class="form-group">
                                            <select class="custom-select-box" name="bathrooms">
                                                <option value="all">厕所数</option>
                                                <option value="1">01 Bathroom</option>
                                                <option value="2">02 Bathrooms</option>
                                                <option value="3">03 Bathrooms</option>
                                                <option value="4">04 Bathrooms</option>
                                                <option value="5">05 Bathrooms</option>
                                            </select>
                                        </div>

                                        <!-- Form Group -->
                                        <div class="form-group">
                                            <div class="range-slider-one clearfix">
                                                <label>Price Filter</label>
                                                <div class="price-range-slider"></div>
                                                <div class="input"><input type="text" class="price-amount" name="field-name" readonly></div>
                                                <div class="title">US Doller</div>
                                            </div>
                                        </div>


                                        <!-- Form Group -->
                                        <div class="form-group">
                                            <button type="submit" class="theme-btn btn-style-two"><span class="btn-title">Search</span></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- End Form -->
                        </div>

                        <!-- Recent Properties -->
                        <div class="sidebar-widget recent-properties">
                            <div class="sidebar-title"><h2>最近的房产</h2></div>
                            <div class="widget-content">
                                <!-- Post -->
                                <article class="post" th:each="newestlist:${newrecommendlist}">
                                    <div class="post-thumb">
                                        <a th:href="@{/todetail(propertyid=${newestlist.getGalleys().getId()})}">
                                            <img src="images/icons/empty.png" th:data-src="${newestlist.getGalleys().getImg()}" alt="">
                                            <span class="status" th:text="${newestlist.getGalleys().getStatus()}"></span>
                                        </a>
                                    </div>
                                    <span class="location" th:text="${newestlist.getGalleys().getLocation()}"></span>
                                    <h3><a href="blog-detail.html" th:text="${newestlist.getGalleys().getName()}"></a></h3>
                                    <div class="price" th:text="${newestlist.getGalleys().getPrice()}"></div>
                                </article>



                            </div>
                        </div>



                        <!-- About Agent -->
                        <div class="sidebar-widget about-agent-widget">
                            <div class="sidebar-title"><h2>Recent Properties</h2></div>
                            <div class="widget-content">
                                <div class="image-box">
                                 <figure  class="image"> <a th:href="@{/toagentdetail(agentid=${agent.getAid()})}"><img  src="images/icons/empty.png" th:data-src="${agent.getAimg()}"  alt=""> </a></figure>
                                </div>
                                <div class="info-box">
                                    <h3 class="name"  th:text="${agent.getAname()}"></h3>
                                    <span class="designation">Real Estate Agent</span>
                                    <ul class="contact-info">
                                        <li><strong>Phone:</strong><a href="#" th:text="${agent.getTelephone()}"></a></li>
                                        <li><strong>Email:</strong><a href="#" th:text="${agent.getEmail()}"></a></li>
                                        <li><strong>Address:</strong><a th:text="${agent.getAddress()}"></a></li>
                                    </ul>
                                    <div class="social-links social-icon-colored">
                                        <strong>Follow Us:</strong> 
                                        <a href="#"><span class="fab fa-facebook-f"></span></a>
                                        <a href="#"><span class="fab fa-twitter"></span></a>
                                        <a href="#"><span class="fab fa-google-plus"></span></a>
                                        <a href="#"><span class="fab fa-linkedin-in"></span></a>
                                    </div>
                                    <div class="btn-box">
                                        <a href="agent-detail.html" class="theme-btn btn-style-two"><span class="btn-title">VIEW PROFILE</span></a>
                                        <a href="agent-detail.html" class="theme-btn btn-style-two"><span class="btn-title">MY PROPERTIES</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Categories -->
                        <div class="sidebar-widget agent-form-widget">
                            <div class="sidebar-title"><h2>Contact Agent</h2></div>
                            <!-- Agent Form -->
                            <div class="agent-form style-two">
                                <form method="post" action="index.html">
                                    <!-- Form Group -->
                                    <div class="form-group">
                                        <input type="text" name="name" placeholder="名字">
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group">
                                        <input type="text" name="name" placeholder="邮箱">
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group">
                                        <input type="text" name="name" placeholder="电话">
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group">
                                        <textarea name="message" placeholder="信息"></textarea>
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group">
                                        <button type="submit" class="theme-btn btn-style-two"><span class="btn-title">Send Massage</span></button>
                                    </div>
                                </form>
                            </div>
                            <!-- End Form -->
                        </div>
                    </aside>
                </div>
            </div>
        </div>
    </div>
    <!-- End Sidebar Container -->

    <!--Clients Section-->
    <section class="clients-section">
        <div class="auto-container">
            <div class="sponsors-outer">
                <!--Sponsors Carousel-->
                <ul class="sponsors-carousel owl-carousel owl-theme">
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/1.png" alt=""></a></figure></li>
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/2.png" alt=""></a></figure></li>
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/3.png" alt=""></a></figure></li>
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/4.png" alt=""></a></figure></li>
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/5.png" alt=""></a></figure></li>
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/1.png" alt=""></a></figure></li>
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/2.png" alt=""></a></figure></li>
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/3.png" alt=""></a></figure></li>
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/4.png" alt=""></a></figure></li>
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/5.png" alt=""></a></figure></li>
                </ul>
            </div>
        </div>
    </section>
    <!--End Clients Section-->

    <!-- Main Footer -->
    <div th:include="footer :: footname"></div>
    <!-- End Main Footer -->

</div>
<!-- End Page Wrapper -->

<!-- Color Palate / Color Switcher -->
<div class="color-palate">
    <div class="color-trigger">
        <i class="fa fa-cog"></i>
    </div>
    <div class="color-palate-head">
        <h6>Choose Your Color</h6>
    </div>
    <div class="various-color clearfix">
        <div class="colors-list">
            <span class="palate default-color active" data-theme-file="css/color-themes/default-theme.css"></span>
            <span class="palate green-color" data-theme-file="css/color-themes/green-theme.css"></span>
            <span class="palate blue-color" data-theme-file="css/color-themes/blue-theme.css"></span>
            <span class="palate orange-color" data-theme-file="css/color-themes/orange-theme.css"></span>
            <span class="palate purple-color" data-theme-file="css/color-themes/purple-theme.css"></span>
            <span class="palate teal-color" data-theme-file="css/color-themes/teal-theme.css"></span>
            <span class="palate brown-color" data-theme-file="css/color-themes/brown-theme.css"></span>
            <span class="palate redd-color" data-theme-file="css/color-themes/redd-color.css"></span>
        </div>
    </div>
    
    <div class="palate-foo">
        <span>You will find much more options for colors and styling in admin panel. This color picker is used only for demonstation purposes.</span>
    </div>
</div><!-- End Color Switcher -->

<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target="html"><span class="fa fa-angle-double-up"></span></div>
<script th:src="@{js/jquery.js}"></script>
<script th:src="@{js/popper.min.js}"></script>
<script th:src="@{js/bootstrap.min.js}"></script>
<script th:src="@{js/jquery-ui.js}"></script>
<script th:src="@{js/jquery.fancybox.js}"></script>
<script th:src="@{js/jquery.stellar.min.js}"></script>
<script th:src="@{js/owl.js}"></script>
<script th:src="@{js/wow.js}"></script>
<script th:src="@{js/mixitup.js}"></script>
<script th:src="@{js/appear.js}"></script>
<script th:src="@{js/script.js}"></script>
<!-- Color Setting -->
<script th:src="@{js/color-settings.js}"></script>
<!--Google Map APi Key-->
<!--<script th:src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeEODj4mnpmSCoPcBVOIPzzHXRZLHHd3Q"></script>-->
<script th:src="@{js/map-script.js}"></script>
<!--End Google Map APi-->

</body>
</html>